import { createRouter, createWebHistory } from 'vue-router'
import BlogHomeView from './views/BlogHomeView.vue'
import school from './views/school.vue'
import MathView from './views/MathView.vue'
import BlogContentView from './views/BlogContentView.vue'

const routes = [
  {
    path: '/',
    redirect: '/home',
  },
  {
    path: '/home',
    name: 'home',
    components: () => import('./views/HomeView.vue'),
  },
  {
    path: 'blog',
    name: 'blog',
    components: BlogHomeView,
  },
  {
    path: '/school',
    name: 'school',
    component: school,
    children: [
      //  嵌套路由，下面要展示的组件需要在父级路由的组件中（router-view）进行展示
      {
        path: 'english', // 嵌套路由中的 path 前面不要加 "/"
        name: 'school-english',
        component: () => import('./views/EnglishView.vue'),
      },
      {
        path: 'math',
        name: 'school-math',
        component: MathView,
      },
    ],
  },
  {
    path: '/blog-content/:id', // 路径传参
    name: 'blog-content',
    component: BlogContentView,
    props: true, // 将路径参数传递到展示组件的 props 中
  },
]

const router = createRouter({
  history: createWebHistory(), //采用html模式
  routes,
})

export default router
